<template>
	<view>
		<uv-navbar leftText="返回" title="已关联的患者" @leftClick="backClick"></uv-navbar>
		
		<view v-if="!relevance">
			<view class="change_self">
				<uv-swipe-action ref="closeClinicOtherRef">
					<view v-for="item, index in userinfo.self" :key="index">
						<uv-swipe-action-item :options="options" @click="selfClick(item)">
							<view class="swipe-action uv-border-top uv-border-bottom">
								<view class="swipe-action__content">
									<view class="self_class">
										<text class="swipe-action__content__text">{{ item.name }}</text>
										<view style="text-align: right;">
											<uv-text :text="item.mobile" type="info" suffixIcon="arrow-right"></uv-text>
										</view>
									</view>
								</view>
							</view>
						</uv-swipe-action-item>
						<uv-line></uv-line>
					</view>
				</uv-swipe-action>
			</view>
			<view class="create_clinic_button">
				<uv-button :hairline="false" text="关联患者" color="#2c9c3c" customTextStyle="color: #ffffff;font-size: 28rpx" @click="relevanceClick()"></uv-button>
			</view>
		</view>
		
		<view v-else>
			<RxLogo></RxLogo>
			<view class="form_class">
				<view class="input_class"><uv-input border="bottom" v-model="pointsInfo.name"><template v-slot:prefix>
					<uv-text text="患者名称" margin="0 3px 0 0" type="tips"></uv-text></template>
				</uv-input></view>
				<view class="input_class"><uv-input border="bottom" v-model="pointsInfo.mobile" type="number" maxlength="11"><template v-slot:prefix>
					<uv-text text="患者电话" margin="0 3px 0 0" type="tips"></uv-text></template>
				</uv-input></view>
			</view>
			<uv-text type="info" text="需与处方单上的患者姓名, 患者电话一致." align="center" :customStyle="{marginTop: '20px'}"></uv-text>
			<view class="form_submit_class">
				<uv-row>
					<uv-col span="6">
						<view style="width: 70%;margin-left: auto;margin-right: auto;">
							<uv-button :hairline="false" text="返回" customTextStyle="color: #2c9c3c;font-size: 28rpx" @click="leftClick"></uv-button>
						</view>
					</uv-col>
					<uv-col span="6">
						<view style="width: 70%;margin-left: auto;margin-right: auto;">
							<uv-button :hairline="false" text="确定" color="#2c9c3c" customTextStyle="color: #ffffff;font-size: 28rpx" @click="handInfoSubmit"></uv-button>
						</view>
					</uv-col>
				</uv-row>
			</view>
		</view>
		
	</view>
</template>

<script>
	import RxLogo from '@/components/RxLogo/RxLogo.vue'
	export default {
		components: {
			RxLogo
		},
		data() {
			return {
				relevance: false,
				userinfo: {},
				options: [{ text: '取消关联', style: { backgroundColor: '#f56c6c' }}],
				pointsInfo: {}
			}
		},
		created() {
			this.userinfo = this.$store.state.userinfo
		},
		methods: {
			backClick() {
				uni.reLaunch({ url:'/pages/patient/patient' })
			},
			relevanceClick() {
				this.relevance = true
			},
			leftClick() {
				this.relevance = false
			},
			areAllValuesNotEmpty(pointsInfo) {
			    return Object.values(pointsInfo).every(value => value !== null && value !== undefined && value !== '');  
			},
			handInfoSubmit() {
				const Empty = this.areAllValuesNotEmpty(this.pointsInfo)
				if (Empty) {
					const regExp = /^1[3456789]\d{9}$/; // 使用正则表达式进行校验
					if (!regExp.test(this.pointsInfo.mobile)) {
						uni.showToast({
							icon: 'error',
							title: '手机号码不正确'
						})
					} else {
						var submit = true
						uni.showLoading()
						for (let i = 0; i < this.userinfo.self.length; i++) {
							if (this.userinfo.self[i].name === this.pointsInfo.name && this.userinfo.self[i].mobile === Number(this.pointsInfo.mobile)) {
								submit = false
								break
							}
						}
						if (submit) {
							this.userinfo.self.push({ name: this.pointsInfo.name, mobile: Number(this.pointsInfo.mobile) })
							this.$store.dispatch('set_userinfo', this.userinfo)
							this.$api.relevance_patient({
								data: this.userinfo.self,
								userId: this.userinfo.userId,
							})
							this.pointsInfo = {}
						}
						this.leftClick()
						uni.showToast({ title: '添加成功', icon:'success' })
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: '完善数据'
					})
				}
			},
			selfClick(reSelf) {
				uni.showLoading()
				console.log(123123, this.userinfo.self)
				this.$api.relevance_patient({
					data: this.userinfo.self,
					userId: this.userinfo.userId,
				}).then((res) => {
					this.userinfo.self = this.userinfo.self.filter(obj => obj !== reSelf)
					console.log(456456, this.userinfo.self)
					this.$store.dispatch('set_userinfo', this.userinfo)
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.change_self {
		margin-top: 90px;
		
		.self_class {
			padding: 0rpx 30rpx 0rpx 0rpx;
			display: flex;	// 使用 flex 布局
			justify-content: space-between;	// 左右两个视图分散排列
		}
	}
		
	.create_clinic_button {
		padding: 30px;
	}
	
	.form_class {
		width: 85%;
		margin-top: 15%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
	}
	
	.input_class {
		margin-bottom: 8px;
	}
	
	.form_submit_class {
		margin-top: 10%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
	}
	
	.uv-page {
		padding: 0;
	}
	.uv-demo-block__title {
		padding: 10px 0 2px 15px;
	}
	.swipe-action {
		&__content {
			padding: 25rpx 0;
			&__text {
				font-size: 15px;
				color: #222;
				padding-left: 30rpx;
			}
		}
	}
</style>
